<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page isELIgnored="false" %> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
        <meta name="baidu-site-verification" content="pddNQTtRaz" />
		<title><c:out value="${pageTitle }">${_blogTitle }</c:out></title>
        <meta name="keywords" content="${_keyword }" />
        <meta name="description" content="${_description }" />
		<meta name="google-site-verification" content="4KoG3qDFYrcjGGEbctZBtdsYSaYkidHuS2hxCj-iWZg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link href="/static/css/base.css" rel="stylesheet" />
		<link href="/static/css/index.css" rel="stylesheet" />
		<link href="/static/css/m.css" rel="stylesheet" />
        <script src="/static/plugin/jquery.min.js"></script>
        <script src="/static/js/swiper/swiper.min.js"></script>
		<link href="/static/css/swiper.min.css" rel="stylesheet" />
		
		<link rel="icon" href="/static/img/logo.ico" type="image/x-icon" />

<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->

        <script type="text/javascript">
        var startWorkYear = 2010;
        var solrStartYear = 2011;
        var jiagouStartYear = 2015;
        jQuery(function() {
        	var currentYear = new Date().getFullYear();
        	
        	setYear('java_year', currentYear - startWorkYear);
        	setYear('solr_year', currentYear - solrStartYear);
        	setYear('jiagou_year', currentYear - jiagouStartYear);
        	
        	/**/
            $(window).scroll(function(){
                var height = $(this).scrollTop() - 0;

                if(height >= 100) {
                	if(!isTopInputHidden) {
                        isTopInputHidden = true;
                        setNavSearchInput(1);
                	}
                } else {
                    setNavSearchInput(0);
                }
            });
        	/**/
            
            $('#topNavSearchInput').keyup(function(e) {
            	if(e.keyCode == 13) {
            		$('#keywordMid').val($('#topNavSearchInput').val());
            		$('#searchformMid').submit();
            	}
            });
        	
            initSwiper();
        });
        var isTopInputHidden = false;
        function setNavSearchInput(n) {
        	return ;
        	if(n) {
        		//展示
        		var topInput = $('#topNavSearchInput');
        		topInput.css({
        			opacity : 1
        		});

        		topInput.val($('#keywordMid').val());
        		topInput.focus();
        	} else {
        		if(!isTopInputHidden) {
        			return;
        		}
        		//隐藏 
                var topInput = $('#topNavSearchInput');
                topInput.css({
                    opacity : 0
                });
                
                $('#keywordMid').val(topInput.val());
                isTopInputHidden = false;
        	}
        }
        
        function setYear(id, n) {
        	$('#' + id).html(n);
        }
        
        //初始化菜单
        function initSwiper() {
            swiper = new Swiper('.swiper-container', {
              spaceBetween: 30,
              centeredSlides: true,
              autoplay: {
                delay: 10500,
                disableOnInteraction: false,
              },
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
            });
        }
        </script>
		<style  type="text/css" >
		.topnav ul {
			margin : 0px;
		}
		
        input#keywordMid{
			outline : none;
			display: inline-block;
			-webkit-box-sizing: content-box;
			-moz-box-sizing: content-box;
			box-sizing: content-box;
			float: none;
			z-index: auto;
			width: 50%;
			height: auto;
			position: static;
			opacity: 1;
			margin: 0;
			padding: 11px 20px;
			overflow: visible;
			-webkit-border-radius: 3px;
			border-radius: 3px;
			font: normal 16px/normal "Times New Roman", Times, serif;
			color: rgba(0,142,198,1);
			-o-text-overflow: clip;
			text-overflow: clip;
            background: rgba(246, 246, 246, 1);
            border: 0.01em solid rgb(235, 235, 235);
			-webkit-box-shadow: 0px 0px 1px 0 rgba(0,0,0,0.2) inset;
			box-shadow: 0px 0px 1px 0 rgba(0,0,0,0.2) inset;
			text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
			-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
			-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
			-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
			transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
			-webkit-transform: none;
			transform: none;
			-webkit-transform-origin: 50% 50% 0;
			transform-origin: 50% 50% 0;
		}
		
		div.articleSet{
		  float : left;
		  background-color : white;
		  box-shadow : 1px 1px 3px #BDBDBD;
		  width : 150px;
		  height : 210px;
		  margin-left : 3px;
		  margin-right : 14px;
		  margin-bottom : 15px;
		}
		
	.swiper-out{
        width:100%;
        position: relative;
        background: url("/static/img/bg.jpg") 0 / cover ;
        padding: 0px;
        box-sizing: border-box;
        z-index:1;
        height: 370px;
        overflow : hidden;
        margin-top : -2px;
        margin-bottom : 12px;
    }
    .swiper-out:after{
        content: "";
        width: 100%;
        height: 130%;
        position: absolute;
        left: 0;
        top: 0;
        background: inherit;
        filter: blur(12px);
        z-index: 2;
    }
    
    .swiper-container{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        text-align: center;
        z-index: 11;
        height: 360px;
        color : white;
    }
    
    .swiper-pagination-bullet{
       background-color : white;
       border-radius : 8px;
       height : 7px;
    }
    .swiper-pagination-bullet-active{
        width : 60px;
        height : 7px;
        opacity : 0.8;
    }
    .swiper-button-next, .swiper-button-prev{
       display : none;
    }
    .swiper-slide{
       padding : 0px;
       text-align : center;
       color : white;
    }
    .swiper-slide-inner{
       width : 1155px; 
       margin : auto;
    }
    .swiper-pagination{
       width : 95% !important;
       text-align : right;
    }
    .swiper-wrapper{
       padding : 10px;
    }
    
    .header-blank{
        display : none;
    }
    .no-albums{
        padding-top : 65px;
    }
    
    .album-img{
        opacity : 0.95;
        border-radius : 2px;
    }
    .album-title{
        font-size : 45px;
        line-height : 120px;
        text-align : left;
        display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 1;
	    overflow: hidden;
	    height: 100px;
	    text-overflow: ellipsis;
    }
    .album-info{
        font-size : 18px;
        line-height : 28px;
        text-align : left;
        padding-top : 30px;
    }
    
    
    .floating {
	    position: relative;
	    transform: translateY(0);
	    transition: transform 1s;
	    width : 150px;
	}
	.floating:after {
	    content: "";
	    display: block;
	    position: absolute;
	    bottom: -30px;
	    left: 50%;
	    height: 8px;
	    width: 100%;
	    box-shadow: 0px 0px 8px 0px rgba(40, 40, 40, 0.6);
	    border-radius: 50%;
	    background-color: rgba(20, 20, 20, 0.3);
	    transform: translate(-50%, 0);
	    transition: transform 1s;
	    z-index : 99999;
	}
	/*鼠标移上去的效果*/
	.floating:hover {
	    transform: translateY(-40px);
	    transition: transform 1s;
	}
	.floating:hover:after {
	    transform: translate(-50%, 40px) scale(0.75);
	    transition: transform 1s;
	}
    
		</style>
	</head>
	
	<body>
	<jsp:include page="common/top.jsp" />
    <!-- <div class="picshow">
  	<ul style="margin-left : -40px; margin-top : 0px;">
    <li><a href="/"><i><img src="/static/img/b04.png"></i>
      <div class="font">
        <h3>Java Script</h3>
      </div>
      </a></li>
    <li><a href="/"><i><img src="/static/img/b01.png"></i>
      <div class="font">
        <h3>Css/Style</h3>
      </div>
      </a></li>
    <li><a href="/"><i><img src="/static/img/b05.png"></i>
      <div class="font">
        <h3>Java/世界上最好的语言</h3>
      </div>
      </a></li>
    <li><a href="/"><i><img src="/static/img/b02.png"></i>
      <div class="font">
        <h3>小程序</h3>
      </div>
      </a></li>
    <li><a href="/"><i><img src="/static/img/b03.png"></i>
      <div class="font">
        <h3>Git/SourceTree</h3>
      </div>
      </a></li>
  </ul>
</div> -->
                    
    <c:choose>
        <c:when test="${ not empty articles.albums }">  
        <div style="padding-top : 55px;"></div>
        <div class="swiper-out">
            <div class="swiper-container">
                <div class="swiper-wrapper">
			        <c:forEach var="album" items="${ requestScope.articles.albums }" varStatus="status" >
                    <div class="swiper-slide">
                        <a href="album?id=${album.id}" style="color : white;" target="_blank">
                        <div class="swiper-slide-inner" style="">
                            <table style="width : 1050px; margin : 30px auto;">
                                <tr>
                                    <td width="285" style="padding-top : 10px;">
                                        <div style="padding-top : 15px; " class="floating">
                                            <img class="album-img" width="150" height="213" src="${album.logo }" />
                                        </div>
                                    </td>
                                    <td valign="top">
                                        <div>
                                            <div class="album-title">${album.title }</div>
                                            <div class="album-info">${album.info }</div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        </a>
                    </div>
			        </c:forEach>  
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>   
        </c:when>
    <c:otherwise>
        <div class="no-albums"></div>
    </c:otherwise>
    </c:choose>
        
        
    <article style="margin-top : 0px;">
	    <div style="width : 100%; text-align : center; padding-bottom : 1px;">
	        <form action="list" method="get" name="searchform" id="searchformMid">
	            <input name="keyword" id="keywordMid" placeholder="请输入搜索关键字，标题、内容、标签" value="" type="hidden" />
	            
	            <input name="pageNo" value="<c:out value="${query.pageNo }">1</c:out>" type="hidden">
	            <input name="tag" value="${query.tag }" type="hidden">
	            <input name="categoryId" value="${query.categoryId }" type="hidden">
	            <input name="pageSize" value="<c:out value="${query.pageSize }">20</c:out>" type="hidden">
	            <!-- <input value="搜 索 文 章" type="submit" class="btnStyle1" /> -->
	        </form>
	    </div>
	    
<!-- 	    文章专辑
        <div style="overflow-x : auto; overflow-y : hidden; width : 100%;">
            <div class="articleSet">
                参数同步
            </div>
            
            <div class="articleSet"> 应用算法学习</div>
            <div class="articleSet"> 待续 </div>
            
            <div style="clear : both;"></div>
	    </div> -->
	    
	    
        <div class="blogs" style="width : 99.5%; padding-right : 6px;">
            <div class="blogs-1">
            <c:choose>
			<c:when test="${ not empty articles.list }">  
				<c:forEach var="article" items="${ requestScope.articles.list }" varStatus="status" >
			    <li> 
                    <h3 class="blogtitle">
                        <a class="hvr-wobble-skew" href="articledetail?atclid=${article.id}" target="_blank">${article.title }</a>&nbsp;&nbsp;&nbsp;
                    </h3>
                    
			        <c:if test="${not empty article.thumbnailImgUrl }">
                    <span class="blogpic">
                        <a href="articledetail?atclid=${article.id}" target="_blank">
                            <img src="<c:out value="${article.thumbnailImgUrl }">https://oomabc.com/staticsrc/img/201809/25/1537852410029_eda9dd1328e64bb8afa0b97a3c2c6c91.jpg</c:out>_260X150">
                        </a>
                    </span>
			        </c:if>
			    	
			      	<div class="bloginfo">
                        <a href="articledetail?atclid=${article.id}" target="_blank">
    			        	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${article.content }</p>
                        </a>
			      	</div>
			      	<div class="autor">
			      		<c:if test="${not empty article.tags }">
			      		<span class="lm">
			      			<c:forEach var="tag" items="${article.tags }" varStatus="status">
			      			<a class="hvr-buzz-out" href="list?tag=${tag }" target="_blank" class="classname">${tag }</a>&nbsp;&nbsp;
			      			</c:forEach>
			      		</span>
			      		</c:if>
			      		<span class="dtime">${article.updateTimeString }</span>
			      		<span class="viewnum">浏览（${article.viewCount }）</span>
			      		<span class="goodNum">有用（${article.goodCount }）</span>
                        <span class="readmore"><a class="hvr-wobble-horizontal" href="articledetail?atclid=${article.id}" target="_blank">阅读原文>></a></span>
			      		
			      		<c:if test="${not empty article.srcType }">
				      		<c:choose>
								<c:when test="${ article.srcType == 1 }">  
									<span>[原创]</span>
							   	</c:when>
							   	<c:otherwise> 
									<span>[转载]</span>
							   	</c:otherwise>
							</c:choose>
			      		</c:if>
			      		
			      	</div>
			    </li>
				</c:forEach>     
		   	</c:when>
		   	<c:otherwise> 
				<div>no </div>
		   	</c:otherwise>
	       </c:choose>
	       </div>
    
			<!-- 分页 -->
			<c:if test="${not empty articles.pages }">
		   	<div class="pagelist">
		
		   		<c:forEach var="pageModel" items="${ articles.pages }" varStatus="status" >
				    <c:choose>
						<c:when test="${ pageModel.link }">  
		    				<a href="list?pageNo=${ pageModel.pageNo }">${ pageModel.pageDesc }</a>
						</c:when>
						<c:otherwise>
		    				<b>${ pageModel.pageDesc }</b>
						</c:otherwise>
					</c:choose>
		   		</c:forEach>
		   	</div>
			</c:if>
			
		</div>
	  	<div class="sidebar" style="display : none;">
			<div class="about">
				<div class="avatar"><img src="/static/img/avatar.jpg" alt=""></div>
			  	<p class="abname">wjyuian | 吴健</p>
			  	<p class="abposition">Java资深开发、Solr搜索引擎开发</p>
			  	<div class="abtext">
			  	  年过半甲的码农一枚，主营方向Java开发/架构、Solr搜索，兼职搞搞Css、JS、Html、Shell、小程序。
			  	  其中<span id="java_year"></span>年Java、<span id="solr_year"></span>年Solr搜索，<span id="jiagou_year"></span>年架构，其它方面，均可以熟练实现 ‘Hello World’ 特效。
			  	</div>
			</div>
			
			<!-- 标签 -->
			<jsp:include page="common/tags_rank.jsp" />
			
			<!-- 关键字 -->
			<%-- <jsp:include page="common/search_input.jsp" /> --%>
			
			<!-- 站长推荐 -->    
			<jsp:include page="common/priority_rank.jsp" />
			
			<!-- 点击排行 -->
			<jsp:include page="common/click_rank.jsp" />
			
			<div class="links">
			</div>
			
			<div class="weixin" style="margin : 0px;">
				<h2 class="hometitle">个人微信</h2>
				<div style="padding : 10px;">
					<img src="/static/img/wx.jpg">
			  	</div>
			</div>
		</div>
    </article>
    <div class="blank"></div>
    <jsp:include page="common/bottom.jsp" />
</body>
</html>